<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_ln6A50',
'ZY_BingChengGongJiangJingShen_1',
'ZY_TiGongQuanFangWeiQing_2',
'ZY_XinXingGaoQiangXiTu_3',
'ZY_HangKongHangTian_4',
'ZY_JunGongXingYe_5',
'ZY_QiCheQingLiangHua_6',
'ZY_YunDongQiCai_7',
'ZY_YingErTuiChe_8',
'img_VUe179',
'ZY_FuHeBan_10',
'ZY_LeJieGengDuo_11',
'img_fznOe12',
'img_sjgXi13',
'ZY_FuShouGan_14',
'ZY_LeJieGengDuo_15',
'img_G_Xm516',
'img_bR3_i17',
'ZY_XingLiJia_18',
'ZY_LeJieGengDuo_19',
'img_F6Zfa20',
'img_JqvoZ21',
'ZY_FuHeBan_22',
'ZY_LeJieGengDuo_23',
'img_Hwccw24',
'img_ARTsO25',
'ZY_FuShouGan_26',
'ZY_LeJieGengDuo_27',
'img_fQhYn28',
'img_xDKoI29',
'ZY_XingLiJia_30',
'ZY_LeJieGengDuo_31',
'img_T9BHQ32',
'img_EpNKl33',
'ZY_XingLiJia_34',
'ZY_LeJieGengDuo_35',
'img_jjyBN36',
'img_uRO6w37',
'ZY_FuHeBan_38',
'ZY_LeJieGengDuo_39',
'img_eIRx740',
'img_N6fhU41',
'ZY_FuShouGan_42',
'ZY_LeJieGengDuo_43',
'img_sPjcY44',
'img_duXFW45',
'ZY_XingLiJia_46',
'ZY_LeJieGengDuo_47',
'img_aKIhH48',
'img_OHLrE49',
'ZY_XingLiJia_50',
'ZY_LeJieGengDuo_51',
'img_S8lJO52',
'img_bgDQ953',
'ZY_FuHeBan_54',
'ZY_LeJieGengDuo_55',
'img_P7Wdh56',
'img_MO0QC57',
'ZY_FuShouGan_58',
'ZY_LeJieGengDuo_59',
'img_Fu0jC60',
'img_U3KpU61',
'ZY_FuHeBan_62',
'ZY_LeJieGengDuo_63',
'img_FnL1J64',
'img_u6n$D65',
'ZY_FuShouGan_66',
'ZY_LeJieGengDuo_67',
'img_f1jHd68',
'img_MoOHT69',
'ZY_XingLiJia_70',
'ZY_LeJieGengDuo_71',
'img_HNFxS72',
'img_aTWbw73',
'ZY_XingLiJia_74',
'ZY_LeJieGengDuo_75',
'img_ptRoU76'
"  ></cms:ads>
<!doctype html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1,"> 
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>湖南佳拓新材料有限公司官网${网页标题}</title> 
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxcen/pc/css/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxcen/pc/css/animate.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxcen/pc/css/common.css">
  <style>.box{ padding: 60px 0; } .box .application-header li{ font-size: 22px; text-align: center; margin-right: 50px; padding-bottom: 20px; border-bottom: 4px solid transparent; } .box .application-header .active{ border-bottom: 4px solid #0F62C8; color: #0F62C8; } .box .application-content{ margin-top: 60px; } .box .application-content .content-warp{ flex-wrap: wrap; } .box .application-content .item{ width: 24%; margin-right: 12px; margin-bottom: 30px; box-sizing: border-box; } .box .application-content .item .item-img{ width: 100%; height: 240px; display: block; } .box .application-content .item-warp{ padding: 30px 50px; font-size: 22px; border: 1px solid #D4D8DE; border-top: 0; box-sizing: border-box; } .box .application-content .item-warp p{ margin-bottom: 20px; height: 44px; } .box .application-content .item-warp div{ color: #0F62C8; } .box .application-content .item-warp img{ width: 30px; } .box .application-content .item:hover .item-warp{ background: #0F62C8; color: #FFFFFF; } .box .application-content .item:hover div{ color: #FFFFFF; } .box .application-content .item:hover .item-warp img{ content: url(https://hwfile.csxuncong.com/jkxcen/pc/images/right-white.png); }</style>
  <meta name="keywords" content="湖南佳拓新材料有限公司">
  <meta name="description" content="湖南佳拓新材料有限公司">
 </head> 
 <body> 
  <jsp:include page="_topWithBanner.jsp"></jsp:include>
  <div class="box"> 
   <div class="container"> 
    <ul id="header" class="application-header flex align-center animated wow fadeInUp">
     <cms:artType code="hyyy" var="artTypeList"></cms:artType>
     <c:forEach items="${artTypeList }" var="artType" varStatus="status" >
      <li class="${status.index == 0} ? 'active' : ''">${artType.artTypeName}</li>
     </c:forEach>
    </ul>
    <div id="content" class="application-content">
     <cms:artType code="hyyy" var="artTypeList"></cms:artType>
     <c:forEach items="${artTypeList }" var="artType" varStatus="status" >
     <div class="${status.index == 0 ? 'content-warp' : 'content-warp none'}">
      <cms:arts code="${artType.code}" var="artsList"></cms:arts>
      <c:forEach items="${artsList }" var="art" varStatus="status" >
      <div class="item flex-column animated wow fadeInUpA" data-wow-delay="0s"> 
       <a href="${path }/do/redirect/pc/productDetail?id=${art.artId}">
        <div> 
         <img class="item-img zy" src="${art.artImage}">
        </div> 
        <div class="item-warp flex flex-column align-center space-center"> 
         <p class="zy">${art.artTitle}</p>
         <div class="flex align-center space-center"> 
          <span class="mr-5 zy" data-type="ad" data-id="${ZY_LeJieGengDuo_11.adId}">${ZY_LeJieGengDuo_11.adTitle}</span> 
          <img src="${img_fznOe12.adImg}" class="zy" data-type="ad" data-id="${img_fznOe12.adId}"> 
         </div> 
        </div>
       </a>
      </div>
      </c:forEach>
     </div>
     </c:forEach>
    </div> 
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="https://hwfile.csxuncong.com/jkxcen/pc/js/swiper-bundle.min.js"></script>
  <script src="https://hwfile.csxuncong.com/jkxcen/pc/js/wow.min.js"></script>
  <script>
		var itemEls = document.getElementsByClassName('nav-item-hover');
		for(var i= 0; i < itemEls.length;i++){
		    itemEls[i].onmouseover = function(){
		        var els = this.getElementsByClassName('nav-layout');
				var img = this.getElementsByClassName('nav-img')
		        if(els.length) {
		            els[0].style.display = 'block'
					img[0].src = 'https://hwfile.csxuncong.com/jkxcen/pc/images/fangxiang-shang.png'
		        };
		    }
		    itemEls[i].onmouseout = function(){
		        var els = this.getElementsByClassName('nav-layout');
				var img = this.getElementsByClassName('nav-img')
		        if(els.length) {
		            els[0].style.display = 'none'
					img[0].src = 'https://hwfile.csxuncong.com/jkxcen/pc/images/fangxiang-xia.png'
		        };
		    }
		}
		
		
        var swiper = new Swiper('.banner .mySwiper', {
            loop:true,
			slidesPerView:1,
            autoplay : true,
            pagination: {
				el: ".swiper-pagination",
				type: "bullets",
            },
        });
		
		
		var header=document.getElementById('header').children;
		var content=document.getElementById('content').children;
		for(var i=0;i<content.length;i++){
			//存储i的值  相当于oul的第一个子元素等于con的第一个子元素  (通俗来说就是一一对应)
			header[i].index=i;
			//循环设置点击事件
			header[i].onmouseover=function(){
				for(var i=0;i<content.length;i++){
					content[i].style.display="none";
					header[i].className = ''
				}
				//this指的是事件前的对象  (ali[i].index=i)
				content[this.index].style.display='flex';
				header[this.index].className = 'active'
			}
		}
		
		var type = getQueryVariable('type') || 0;
		console.log(type)
		muneChange(type)
		
		function muneChange(index){
		    var header=document.getElementById('header').children;
		    var content=document.getElementById('content').children;
			for(var i=0;i<content.length;i++){
				content[i].style.display="none";
				header[i].className = 'nomal'
			}
		    content[index].style.display='flex';
		    header[index].className = 'active'
		}
		function getQueryVariable(variable)
		{
		    var query = window.location.search.substring(1);
		    var vars = query.split("&");
		    for (var i=0;i<vars.length;i++) {
		            var pair = vars[i].split("=");
		            if(pair[0] == variable){return pair[1];}
		    }
		    return(false);
		}
		
		var wow = new WOW({
		    boxClass: 'wow',
		    animateClass: 'animated',
		    offset: 0,
		    mobile: true,
		    live: true
		});
		wow.init();
    </script> 
 </body>
</html>